<template>
  <Modal v-if="system.welcome" height="460px">
    <div class="welcome flex flex-col gr-8 justify-between h-100">
      <h3> HI,初来乍到，选择一个 <span class="text-pink">身份</span> 吧 </h3>
      <div class="flex gc-12">
        <div
          v-for="(item, key) in list"
          :key="key"
          class="flex-1"
          :class="{ active: selected === item.id }"
          @click="selectItem(item.id)"
        >
          <img :src="item.img" class="w-100" />
          <div class="desc">
            {{ item.desc }}
          </div>
        </div>
      </div>
      <div class="text-center">
        <div class="comfirm" @click="comfirm"> 确定 </div>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import engeer from '@/assets/images/engeer.webp';
  import visitor from '@/assets/images/visitor.webp';
  import { ref } from 'vue';
  import { programData } from '@/store/program/utils';
  import { getSystem } from '@/store/system/utils';
  import { openLink } from '@/utils/utils';
  import gptJson from './gpt';
  import Modal from '../components/modal/Modal.vue';
  import { defaultServeList } from '../head/server/data';
  import { notify } from '../components/notify/bus';

  const system = getSystem();
  const selected = ref(1);
  const selectItem = (id: number) => {
    selected.value = id;
  };
  const list = [
    {
      img: engeer,
      desc: '工程师,空白项目,亲手配置',
      id: 0,
      action() {
        //
      },
    },
    {
      img: visitor,
      desc: '游客,开箱即用,内置GPT',
      id: 1,
      action() {
        const data = programData();
        data.net.baseUrl = defaultServeList[2].baseUrl;
        data.net.title = defaultServeList[2].title;
        // @ts-ignore
        data.programList = data.programList.concat(gptJson);
        notify({
          title: '提示',
          msg: `是否需要查看介绍和使用手册?`,
          onComfirm() {
            openLink('https://www.bilibili.com/video/BV1HN4y1k7xK/');
          },
        });
      },
    },
  ];

  const comfirm = () => {
    list[selected.value].action();
    system.welcome = false;
  };
</script>

<style lang="scss" scoped>
  .welcome {
    padding: 12px;
    .text-pink {
      color: var(--pink);
    }
    img {
      filter: grayscale(100%);
      border-radius: var(--radius);
      cursor: pointer;
      &:hover {
        filter: grayscale(50%);
      }
    }
    .active {
      img {
        filter: grayscale(0%);
      }
    }
    .desc {
      background-color: #f8f8f8;
      height: 32px;
      text-align: center;
      line-height: 32px;
    }
    .comfirm {
      line-height: 36px;
      height: 36px;
      width: 140px;
      display: inline-block;
      background-color: var(--primary);
      cursor: pointer;
      border-radius: var(--radius);
    }
  }
</style>
